FlyTalk.views.SearchMapTab = Ext.extend(Ext.Panel, {
	//fullscreen: true,
	title: 'Map',
	layout: 'vbox',
	//pack: 'center',
				
    initComponent: function () {

// itin panel (shows the most important detail for each touchpoint
		
		var mapButtonTpl = new Ext.XTemplate(
				'<img src={src} alt="" />',
				'<p style="font-size:small">{btnText}</p>'
			);
		
// restaurant view
		
		this.restMap1 = new Ext.Button({
			data:{
				src: "images/SearchMapLeft.gif",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="99"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			handler: this.tapImage1,
			scope: this
		});
		
		this.restMap2 = new Ext.Button({
			data:{
				src: "images/SearchMapCenter.gif",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			handler: this.tapImage2,
			scope: this
		});
		
		this.restMap3 = new Ext.Button({
			data:{
				src: "images/SearchMapRight.gif",
				btnText: "",
			},
			baseCls: "menuButton",
			pressedCls: "menuButtonPressed",
			//tpl:'<div><img src={src} width="221"/></div>',
			tpl:mapButtonTpl,
			//flex:1,
			handler: this.tapImage3,
			scope: this
		});
		
		this.overlayImage1 = new Ext.BoxComponent({
            floating: true,
            modal: true,
			
			//centered: true,
            layout:'fit',
            
			 hideMode:'close',
		     html: '<img src="./images/LaItaliana.png" ></img>',
		});
		
		
		this.overlayImage2 = new Ext.BoxComponent({
            floating: true,
            modal: true,
            //centered: true,
         	layout:'fit',
			hideMode:'close',
			
		    html: '<img src="./images/PastaPerfecto.png" ></img>',
		});
		
		this.overlayImage3 = new Ext.BoxComponent({
            floating: true,
            modal: true,
            //centered: true,
          	layout:'fit',
          	hideMode:'close',
		    html: '<img src="./images/guisepe.png" ></img>',
		});
		
		this.RestPanel = new Ext.Panel({
			//autoLoad: true,
			scroll: true,
          //  fullscreen: true,
			height: 400,
			width: 320,
			hidden: false,
            layout: 'hbox',
          
			
			items: [this.restMap1, this.restMap2, this.restMap3],
		});
		
		
		
		this.items= [
		             //{html: '<div ><h1 class="tp-heading-large">checkin</h1> <p class="tp-heading-small">Flight TAP001</p> <p class="tp-heading-small">Wait time approximately 5 minutes</p></div>',
		     			//},
		             
					// this.ItinPanel,
		            // this.BodyPanel,
					 this.RestPanel,
					 this.overlayImage1,
					 this.overlayImage2,
					 this.overlayImage3,
		             ];
			
		FlyTalk.views.SearchMapTab.superclass.initComponent.call(this);
	
		 
    },
    
    backButtonTap: function () {
    	this.RestPanel.hide();
		this.BodyPanel.show();
		this.BodyPanel.doComponentLayout();
        Ext.dispatch({
            controller: FlyTalk.controllers.ftController,
            action: 'openHome'
        });
    },
    
            
    filterButtonTap: function () { // to open the image overlay 
    	this.overlay.setCentered(true);
    	this.overlay.show();
    },
        
	filterButton1Tap: function () { // to open the image overlay 
		if(this.filterButton1.title == "unclicked"){
			this.filterButton1.update({src: "images/filter_rest_clicked.png"});
			this.filterButton1.title = "clicked";
			this.filterButton1.doComponentLayout();
			this.overlay.doComponentLayout();
			this.overlay.hide();
			this.BodyPanel.hide();
			this.RestPanel.show();
			this.RestPanel.doComponentLayout();
		}else{
			this.filterButton1.update({src: "images/filter_rest.png"});
			this.filterButton1.title = "unclicked";
			this.filterButton1.doComponentLayout();
			this.overlay.doComponentLayout();
			this.overlay.hide();
			this.BodyPanel.show();
			this.RestPanel.hide();
			this.BodyPanel.doComponentLayout();
		}
	
		
//		Ext.dispatch({
//			controller: FlyTalk.controllers.ftController,
//			action: 'openRestaurant'
//		});
	},
	
	tapImage1: function () { // to open the overlay BurgerKing
	  //  this.overlayImage1.setCentered(true);
		this.overlayImage1.setPosition(1,80);
	    this.overlayImage1.show();
		
	    this.overlayImage1.doComponentLayout();
	},
	    
	tapImage2: function () { // to open the overlay 
	        
	  //  this.overlayImage2.setCentered(true);
		this.overlayImage2.setPosition(60,85);
	    this.overlayImage2.show();
	    //this.overlayImage1.doComponentLayout();
	},
	        
	tapImage3: function () { // to open the overlay 
	    this.overlayImage3.setPosition(40,135);
	   //  this.overlayImage3.setCentered(true);
	    this.overlayImage3.show();
	    //this.overlayImage1.doComponentLayout();
	},
   
});